<template>
  <view class="put_in">

    <view class="input_bgc">
      <u-input class="input" v-model="value" placeholder="输入名称或条形码搜索" placeholderStyle="color: #7e7f81 " />
      <view class="btn">
        <u-icon name="scan"></u-icon>
      </view>
    </view>


    <u-tabs class="tabs" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

    <view v-if="current === 0">
      <view class="not_sold content">
        <view class="prompt">
          提示：库存商品待厂家有活动时方可出售。
        </view>


        <view class="commodity">
          <view class="commodity_item" v-for="(item, index) in dataList" :key="index">
            <view class="title">
              <view class="red_text">{{ item.title }}</view>
              <view class="green_text small_text">小盒: </view>
              <view class="small_text">2</view>
              <view class="green_text small_text">条盒: </view>
              <view class="small_text">0</view>
            </view>
            <view class="table">
              <view class="left_img">
                <image src="../../static/logo.png"></image>
              </view>
              <view class="right_text">

                <view class="small_box">
                  <view>小盒: </view>
                  <view class="text">
                    <view class="green_text">普通：{{ item.small.ordinary }}币/个</view>
                    <view class="red_text">会员：{{ item.small.member }}币/个</view>
                  </view>
                  <view class="btn">出售</view>
                </view>
                <view class="line"></view>

                <view class="small_box">
                  <view>条盒: </view>
                  <view class="text">
                    <view class="green_text">普通：{{ item.strip.ordinary }}币/个</view>
                    <view class="red_text">会员：{{ item.strip.member }}币/个</view>
                  </view>
                  <view class="btn out_of_stock">无库存</view>
                </view>
                <view class="line"></view>

                <view class="small_box">
                  <view>小盒码: </view>
                  <view class="text">
                    {{ item.smallYard }}
                  </view>
                </view>
                <view class="line"></view>

                <view class="small_box">
                  <view>条盒码: </view>
                  <view class="text">
                    {{ item.stripYard }}
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="current === 1">
      <view class="content">
        <view class="not_data">
          <image src="../../static/not_data.png"></image>
        </view>
      </view>
    </view>
    <view v-if="current === 2">
      <view class="content">
        <view class="form">

          <view class="form_item">
            <view class="title">交易单号：</view>
            <view>121212121221</view>
            <view class="back">部分退回</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">盒子类型：</view>
            <view class="blue">小盒子</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">品牌：</view>
            <view>黄山 (小红方印)中支</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售信息：</view>
            <view>共2条，共0.9000分</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">核对情况：</view>
            <view>通过1条，退回1条</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售时间：</view>
            <view>2023-02-02 17:14:30</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售时间：</view>
            <view>2023-02-02 17:16:30</view>
          </view>

        </view>
      </view>
    </view>
    <view v-if="current === 3">
      <view class="content">
        <view class="form">

          <view class="form_item">
            <view class="title">交易单号：</view>
            <view>121212121221</view>
            <view class="back">完成</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">盒子类型：</view>
            <view class="blue">小盒子</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">品牌：</view>
            <view>黄山 (小红方印)中支</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售信息：</view>
            <view>共2条，共0.9000分</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">核对情况：</view>
            <view>通过1条，退回1条</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售时间：</view>
            <view>2023-02-02 17:14:30</view>
          </view>
          <view class="line"></view>

          <view class="form_item">
            <view class="title">出售时间：</view>
            <view>2023-02-02 17:16:30</view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        name: '未出售'
      }, {
        name: '审核中'
      }, {
        name: '已回复'
      },
      {
        name: '已出售'
      }],
      current: 1,
      value: '',
      dataList: [
        {
          title: '黄山 (微商新概念)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
        {
          title: '黄山 (红方印金中支)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
        {
          title: '黄山 (红方印金中支)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
      ],
    }
  },
  methods: {
    change(index) {
      this.current = index.index;
    }
  }
}
</script>

<style scoped lang="scss">
.put_in {

  .input_bgc {
    display: flex;
    border-top: 4rpx solid #e5e6e8;
    padding: 20rpx;
    background-color: #f7f8fa;

    .input {
      flex: 1;
      background-color: #fff;
      border-top-right-radius: 0rpx;
      border-bottom-right-radius: 0rpx;

      .uni-input-placeholder /deep/ .input-placeholder {
        color: red;
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      background-color: #f9fafc;
      border: 2rpx solid #e5e6e8;
      border-top-right-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
  }

  .content {
    padding: 0 30rpx;
  }

  .not_sold {
    .prompt {
      margin-top: 35rpx;
      padding: 10rpx 20rpx;
      color: #cb576d;
      background-color: #cbe3ff;
      border: 1px solid #a5c6f7;
      font-size: 24rpx;
      border-radius: 10rpx;
    }


    .commodity {
      margin-top: 40rpx;

      .commodity_item {
        /* margin-bottom: 30rpx; */
        /* height: 400rpx; */
        margin-bottom: 40rpx;

        .title {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          .red_text {
            color: #e05765;
            margin-right: 20rpx;
          }

          .green_text {
            color: #539c80;
            margin-left: 10rpx;
          }

          .small_text {
            font-size: 24rpx;
            margin-right: 10rpx;
          }
        }

        .table {
          display: flex;
          height: 100%;
          border: 2rpx solid #dededc;
          border-radius: 10rpx;
          padding: 10rpx 0rpx;

          .left_img {
            overflow: hidden;
            width: 200rpx;
            height: 100%;

            /* background-color: red; */
            image {
              width: 200rpx;
              height: 300rpx;
            }
          }

          .right_text {
            flex: 1;

            /* background-color: skyblue; */
            .small_box {
              display: flex;
              /* justify-content: space-around; */
              align-items: center;
              margin-left: 30rpx;

              .text {
                margin-left: 30rpx;

                .green_text {
                  color: #188a5a;
                  font-size: 24rpx;
                }

                .red_text {
                  color: #d64459;
                  font-size: 24rpx;
                  margin-top: 10rpx;
                }
              }

              .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 40rpx;
                background-color: #0570fd;
                color: #fff;
                padding: 20rpx;
                border-radius: 10rpx;
                font-size: 24rpx;
              }

              .out_of_stock {
                background-color: #a1a6ac;
              }
            }

            .line {
              height: 2rpx;
              background-color: #e3e3e3;
              margin: 10rpx 0;
            }
          }
        }
      }
    }
  }

  .form {
    border: 2rpx solid #dadada;
    border-radius: 10rpx;
    padding: 10rpx;
    margin-top: 30rpx;

    .form_item {
      display: flex;
      font-size: 24rpx;
      position: relative;

      .title {
        font-weight: 600;
      }

      .back {
        position: absolute;
        color: #258d60;
        font-weight: 600;
        right: 0;
      }

      .blue {
        background-color: #cbf3f8;
        font-weight: 600;
        padding: 5rpx 20rpx;
      }
    }

    .line {
      margin: 10rpx 0;
      height: 2rpx;
      background-color: #e8e8e8;
    }
  }

  .not_data {
    margin-top: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 150rpx;
      height: 120rpx;
    }
  }
}</style>
